<template>
	<view class="app addpetinfo">
		<AppNavbar :bgColor="'#ffff'" leftIconColor="black" title="Add pet information" titlecolor="black"
			:fontWeight="600"></AppNavbar>
		<view class="addpetinfo-avatar flex-center-center my-5">
			<view class="addpetinfo-avatar-border bor-radius-square flex-center">
				<up-avatar :src="state.avatarUrl" mode="aspectFill" size="100" @click="uploadImageFun"></up-avatar>
			</view>
		</view>
		<view class="addpetinfo-form p-4">

			<Myform :data="state.formData" :border="true" padding="20rpx 10rpx" margin="30rpx 0rpx" :label="true"
				ref="myFormRef" :rules="state.rules" v-if="state.formshow">
			</Myform>
			<button class="addpetinfo-button mybutton mt-5" @click="submit">OK</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getpetdetail,
		modifypetInfo
	} from '../../api/MyPet';
	const myFormRef = ref(null)
	const state = reactive({
		formshow: false,
		chokerId: '',
		formData: [{
				prop: 'petName',
				label: 'petName',
				value: '',
			},
			{
				prop: 'petCategory',
				label: 'Breed',
				value: '1',
				type: 'select',
				columns: [{
					text: "dog",
					value: 0
				}, {
					text: "cat",
					value: 1
				}],
				disabled: true
			},
			{
				prop: 'petBirthday',
				label: 'Birthday',
				value: '',
				type: 'date',
				disabled: true
			},
			{
				prop: 'petSex',
				label: 'Gender',
				value: '',
				type: 'select',
				columns: [{
					text: "default",
					value: 0
				}, {
					text: "man",
					value: 1
				}, {
					text: "female",
					value: 2
				}],
				disabled: true
			},
			{
				prop: 'weight',
				label: 'Weight',
				value: ''
			},
		],
		rules: {
			petName: 'require',
			petCategory: 'require',
			petBirthday: 'require',
			petSex: 'require',
			weight: 'require'
		},
		avatarUrl: '' || '/static/image/avatar2.png'
	})
	onLoad((e) => {
		state.chokerId = e.chokerId
		init(e.chokerId)
	})

	const init = async (chokerId) => {
		const res = await getpetdetail({ //获得宠物详细
			chokerId
		})
		state.avatarUrl = res.data.petPhoto
		// 
		state.formData.forEach(item => {
			for (let key in res.data) {
				if (item.prop === key) {
					item.value = res.data[key]
				}
			}

		})
		state.formshow = true

	}

	const uploadImageFun = () => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: async (res) => {
				let arr = res.tempFilePaths
				let promiseList = []
				for (const item of arr) {
					let p = uni.uploadMedia.startUpload({
						files: [item],
						method: 'images/',
						dir: 'text/',
					})
					promiseList.push(p)
				}
				const [
					[url]
				] = await Promise.all(promiseList)
				state.avatarUrl = url
				console.log(url);
			}
		})
	}
	const submit = async () => {
		const data = await myFormRef.value.verify()
		// console.log(data);
		if (data) {
			modifypetInfo({
				...data,
				chokerId: state.chokerId
			}).then(res => {
				uni.tools.showTips('操作成功')
			})
		} else {
			uni.tools.showTips('请填写完整')
		}

	}
</script>

<style lang="scss" scoped>
	.addpetinfo {
		.addpetinfo-avatar-border {
			box-shadow: 0px 2px 6px 1px rgba(232, 232, 234, 1);
			border: 3px solid #fff;
			width: 210rpx;
			height: 210rpx;
			background-color: #dde3e7;
			// background-color: ;
		}



		.addpetinfo-button {
			border-radius: 0;
			background: $uni-bg-linear;
			color: $uni-bg-color;
		}
	}



	::v-deep .u-form-item__body__left__content__label {
		font-weight: 900;
	}
</style>